<template>
  <div>
    <!--卡片-->
    <el-card class="box-card">
      <!-- 搜索与添加区域 -->
      <el-tag size="medium" style="margin: 10px">表名：{{ tableName }}</el-tag>

      <!--表格-->
      <el-table :data="listForm" stripe border>
        <el-table-column prop="columnName" label="字段名" />
        <el-table-column prop="columnType" label="字段类型" />
        <el-table-column prop="columnComment" label="字段描述" />
        <!-- <el-table-column prop="columnComment" label="字段描述">
         <template slot-scope="scope">
            <el-input v-model="scope.row.columnComment" size="mini" class="edit-input" />
          </template>
        </el-table-column> -->
      </el-table>
    </el-card>
    <el-card class="box-card" style="border-radius: 0px">
      <div slot="header" class="clearfix">
        <span>表配置</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="saveBtn">保存</el-button>
      </div>

      <el-form ref="formRef" :model="form" :rules="formRules" label-width="80px">
        <el-form-item label="作者" prop="author">
          <el-input v-model="form.author" style="width: 30%" placeholder="作者名称：wang" />
          <span style="color: #C0C0C0;margin-left: 10px;">类上面的作者名称</span>
        </el-form-item>
        <el-form-item label="模块名" prop="moduleName">
          <el-input v-model="form.moduleName" style="width: 30%" placeholder="模块名称：syyo-demo" />
          <span style="color: #C0C0C0;margin-left: 10px;">
            模块名:syyo-demo,包名:com.syyo,文件生成的目录是：模块名/src/main/java/包名/模块名横杠后缀 =>
            {syyo-demo}/src/main/java/{com/syyo}/{demo}/controller || service || mapper
          </span>
        </el-form-item>
        <el-form-item label="包名" prop="pack">
          <el-input v-model="form.pack" style="width: 30%" placeholder="包名：com.syyo" />
          <span style="color: #C0C0C0;margin-left: 10px;">
            模块名:syyo-demo,包名:com.syyo,文件生成的目录是：模块名/src/main/java/包名/模块名横杠后缀 =>
            {syyo-demo}/src/main/java/{com/syyo}/{demo}/controller || service || mapper
          </span>
        </el-form-item>
        <el-form-item label="前端路劲" prop="apiPath">
          <el-input v-model="form.apiPath" style="width: 30%" placeholder="前端路劲：F:\views\system\user" />
          <span style="color: #C0C0C0;margin-left: 10px;">
            前端路劲，如：F:\views\system\user
          </span>
        </el-form-item>
        <el-form-item label="接口名称" prop="apiName">
          <el-input v-model="form.apiName" style="width: 30%" placeholder="接口名称：用户" />
          <span style="color: #C0C0C0;margin-left: 10px;">
            接口名称，如：用户
          </span>
        </el-form-item>
        <el-form-item label="是否覆盖" prop="cover">
          <el-radio-group v-model="form.cover" size="mini" style="width: 30%">
            <el-radio-button label="true">是</el-radio-button>
            <el-radio-button label="false">否</el-radio-button>
          </el-radio-group>
          <span style="color: #C0C0C0;margin-left: 10px;">选是的话，会覆盖之前的代码文件，谨防误操作，请慎重选择</span>
        </el-form-item>
      </el-form>

    </el-card>
  </div>
</template>

<script>
import { listColumn } from '@/api/sys-tools/datasources'
import { addConfig, getConfig } from '@/api/sys-tools/generator'
export default {
  name: 'Datasources',
  data() {
    return {
      tableName: '',
      listForm: [],
      form: {
        author: '',
        moduleName: '',
        pack: '',
        cover: false,
        apiPath: '',
        apiName: ''
      },
      formRules: {
        author: [
          { required: true, message: '作者不能为空', trigger: 'blur' }
        ],
        moduleName: [
          { required: true, message: '模块不能为空', trigger: 'blur' }
        ],
        pack: [
          { required: true, message: '包路径不能为空', trigger: 'blur' }
        ],
        cover: [
          { required: true, message: '是否覆盖必填', trigger: 'blur' }
        ],
        apiPath: [
          { required: true, message: '前端路劲必填', trigger: 'blur' }
        ],
        apiName: [
          { required: true, message: '接口名称必填', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    // 初始化列表
    this.initList()
    this.initListConfig()
  },

  methods: {
    saveBtn() {
      this.form.tableName = this.tableName
      addConfig(this.form).then(res => {
        if (res.code === 20000) {
          this.$message.success(res.message)
        }
      })
    },
    // 初始化表的字段数据
    initList() {
      this.tableName = this.$route.params.tableName
      const params = {
        tableName: this.$route.params.tableName
      }
      listColumn(params).then(res => {
        this.listForm = res.data
      })
    },

    // 初始化配置信息
    initListConfig() {
      getConfig(this.$route.params.tableName).then(res => {
        if (res.data !== null) {
          this.form = res.data
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  .edit-input {
    .el-input__inner {
      border: 1px solid #e5e6e7;
    }
  }
</style>

<style scoped>
  /deep/ .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>
